<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="library/bootstrap.min.css">
    <!-- <link rel="stylesheet" type="text/css" href="library/datepicker/skin/WdatePicker.css" /> -->
    <link rel="stylesheet" href="library/datepicker/skin/WdatePicker.css">
    <style>
        .wrap {
            width: 90%;
            margin: 0 auto;
        }
        
        #template {
            display: none;
        }
        
        #mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: none;
        }
        
        #pop {
            padding: 20px 50px;
            width: 600px;
            background-color: #fff;
            border-radius: 10px;
            transform: translate(-50%, -50%);
            position: fixed;
            top: 50%;
            left: 50%;
            display: none;
        }
        
        #pop h2 {
            margin-bottom: 20px;
        }
        
        select {
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2>学生信息管理系统</h2>
        <hr>
        <button class="btn btn-primary" id="addStudent" style="float:right;">+ 新增学生</button>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="data-wrap">
                <tr id="template">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-city"></td>
                    <td class="data-joinData"></td>
                    <td>
                        <button class="btn btn-primary data-edit" id="editStudent">编辑</button>
                        <button class="btn btn-danger data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="mask"></div>
    <div id="pop">
        <h2>添加学生</h2>

        <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
				<input type="radio" name="sex" id="data-male" checked="checked">男
			</label>
                <label class="radio-inline">
				<input type="radio" name="sex" id="data-female">女
			</label>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-joinDate" placeholder="入学日期" onclick="WdatePicker()">
                </div>
            </div>

            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>

    </div>

    <script src="library/jquery.min.js"></script>
    <script src="library/datepicker/WdatePicker.js"></script>
    <script src="library/citys.js"></script>
    <script>
        let address = "http://10.35.170.195"
        let template = $("#template");
        //删除操作
        $(".data-delete").click(function() {
                let nowItem = $(this).closest("tr");
                if (confirm(`你确定要删除${nowItem.find(".data-name").html()}同学嘛？不可以反悔哇！`)) {

                    $.ajax({
                        url: `${address}/deleteStudent`,
                        data: {
                            id: $(this).closest("tr").find(".data-id").html()
                        },
                        success(data) {
                            if (data === "success") {
                                nowItem.fadeOut();
                            } else {
                                alert("删除失败");
                            }
                        }
                    })

                }
            })
            //编辑功能
        $("#editStudent").click(function() {
                let ID = $(this).closest("tr").find(".data-id").html()
                $("#data-name").val($(this).closest("tr").find(".data-name").html())
                $("#data-age").val($(this).closest("tr").find(".data-age").html())
                $("#data-joinDate").val($(this).closest("tr").find(".data-joinData").html())
                $("#submit").click(function() {
                    if ($("#data-name").val() && $("#data-age").val() && $("#data-joinDate")) {
                        $.ajax({
                            url: `${address}/editStudent`,
                            data: {
                                id: ID,
                                name: $("#data-name").val(),
                                age: $("#data-age").val(),
                                sex: $("#data-female")[0].checked ? 0 : 1,
                                city: $("#province").val() + $("#city").val() + $("#area").val(),
                                joinDate: $("#data-joinDate").val(),
                            },
                            success(data) {
                                if (data === "success") {
                                    history.go(0)
                                } else {
                                    alert("操作失败")
                                }
                            }
                        })
                    }
                })
            })
            //添加操作

        //添加时的弹出框和遮罩层
        $("#addStudent").click(function() {
            $("#mask").fadeIn();
            $("#pop").fadeIn();
            $("#data-name").focus()
            $("#submit").click(function() {
                if ($("#data-name").val() && $("#data-age").val() && $("#data-joinDate")) {
                    $.ajax({
                        url: `${address}/addStudent`,
                        data: {
                            name: $("#data-name").val(),
                            age: $("#data-age").val(),
                            sex: $("#data-female")[0].checked ? 0 : 1,
                            city: $("#province").val() + $("#city").val() + $("#area").val(),
                            joinDate: $("#data-joinDate").val(),
                        },
                        success(data) {
                            if (data === "success") {
                                history.go(0)
                            } else {
                                alert("操作失败")
                            }
                        }
                    })
                }
            })
        })
        $("#editStudent").click(function() {
                $("#mask").fadeIn();
                $("#pop").fadeIn();
                $("#data-name").focus()
            })
            //取消添加时的操作
        $("#cancel").click(function() {
            $("#mask").fadeOut("fast");
            $("#pop").fadeOut("fast");
        })


        // alert();
        $.ajax({
            url: `${address}/getStudentList`,
            success(data) {
                // console.log(data)
                let tbody = $(".data-wrap");
                data.forEach(item => {
                    let newItem = template.clone(true).attr("id", "");
                    newItem.find(".data-id").html(item.id)
                    newItem.find(".data-name").html(item.name)
                    newItem.find(".data-age").html(item.age)
                    newItem.find(".data-sex").html(item.sex ? "男" : "女")
                    newItem.find(".data-city").html(item.city)
                    newItem.find(".data-joinData").html(item.joinData)
                    newItem.appendTo(tbody)
                })
            }
        })
    </script>
</body>

</html>